<template>
  <div>
    <template v-if="article && article.original_status">
      <van-nav-bar
        :fixed="true"
        :placeholder="true"
        :title="article.original_status.title"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
      <div class="article">
        <!-- 返回导航，文章标题 -->
        <div class="cell-header">
          <van-image
            width="1rem"
            height="1rem"
            fit="contain"
            :src="
              article.original_status.user.photo_domain +
              article.original_status.user.profile_image_url.split(',')[0]
            "
          />
          <div class="header-right">
            <div class="name">
              {{ article.original_status.user.screen_name }}
            </div>
            <div class="time">{{ article.original_status.timeBefore }}</div>
          </div>
        </div>
      </div>
      <div
        class="content"
        v-html="article.original_status && article.original_status.text"
      ></div>
    </template>
    <template v-if="articleCache && articleCache.original_status">
      <van-nav-bar
        :fixed="true"
        :placeholder="true"
        :title="articleCache.original_status.title"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
      <div class="article">
        <!-- 返回导航，文章标题 -->
        <div class="cell-header">
          <van-image
            width="1rem"
            height="1rem"
            fit="contain"
            :src="
              articleCache.original_status.user.photo_domain +
              articleCache.original_status.user.profile_image_url.split(',')[0]
            "
          />
          <div class="header-right">
            <div class="name">
              {{ articleCache.original_status.user.screen_name }}
            </div>
            <div class="time">
              {{ articleCache.original_status.timeBefore }}
            </div>
          </div>
        </div>
      </div>
      <!-- 文章内容 -->
      <div
        class="content"
        v-html="
          articleCache.original_status && articleCache.original_status.text
        "
      ></div>
    </template>
    <!-- 评论 -->
    <div class="comments">
      <h5>评论</h5>
      <div class="comment-list">
        <div class="comment-itme" v-for="(comment, i) in comments" :key="i">
          <div class="cell-header">
            <van-image
              :round="true"
              width="1rem"
              height="1rem"
              fit="contain"
              :src="
                comment.user.photo_domain +
                comment.user.profile_image_url.split(',')[0]
              "
            />
            <div class="header-right">
              <div class="name">
                {{ comment.user.screen_name }}
              </div>
            </div>
          </div>
          <div class="txt"><p v-html="comment.text"></p></div>
        </div>
      </div>
    </div>
    <div class="input-commnet">
      <van-field
        v-model="commentValue"
        rows="2"
        autosize
        label="留言"
        type="textarea"
        maxlength="50"
        placeholder="请输入留言"
        show-word-limit
      />
    </div>
    <div class="comment-btn">
      <van-button class="btn" type="primary" @click="commitComment" block
        >提交评论</van-button
      >
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { Toast } from "vant";
import * as api from "@/api/index";
export default {
  props: ["article"], // 数据没有缓存，刷新会丢失
  data() {
    return {
      articleCache: {},
      comments: [],
      commentValue: "",
    };
  },
  computed: {
    ...mapState(["user"]),
  },
  methods: {
    CacheArticle() {
      let articles = {};
      if (this.article) {
        articles[this.article.id] = this.article;
        sessionStorage.setItem(articles, JSON.stringify(articles));
        // console.log("123");
        this.articleCache = {};
      } else {
        if (sessionStorage.getItem(articles)) {
          articles = JSON.parse(sessionStorage.getItem(articles));
          //   console.log(this.$route.params.id);
          this.articleCache = articles[this.$route.params.id];
        } else {
          // 服务器请求文章数据
          // 请求数据覆盖articleCache
          // 顺带缓存到sessionStorage.article
        }
        //   console.log(this.$route.params.id);
      }
      // console.log(article);
      // console.log(this.$route);
    },
    onClickLeft() {
      this.$router.back();
    },
    async getComments() {
      let res = await api.getArticleComment({ id: this.$route.params.id });
      this.comments = res.comments;
      if (res.result === "ok") {
        Toast.success("评论成功");
      }
    },
    async commitComment() {
      if (this.user && this.user.token) {
        let res = await api.postArticleComment({
          id: this.$route.params.id,
          commentValue: this.commentValue,
        });
      } else {
        Toast.fail("请登录后评论");
        this.$router.push("/login");
      }
    },
  },
  mounted() {
    // console.log(this.article);
    this.CacheArticle();
    this.getComments();
  },
  activated() {
    // keep-alive可以用这个钩子监听
    this.CacheArticle();
    this.getComments();
  },
  watch: {
    $route: {
      handler() {
        this.CacheArticle();
      },
    },
  },
};
</script>

<style lang="less" scoped>
.article {
  .cell-header {
    padding: 0.2rem;
    // margin-bottom: 0.3rem;
    display: flex;
    gap: 0.5rem;
    .header-right {
      font-size: 0.3rem;
      line-height: 0.5rem;
      .time {
        color: #999;
      }
    }
  }
}
.content {
  padding: 0 0.4rem 1.2rem;
  color: #666;
  font-size: 0.4rem;
  /deep/ p {
    color: #666;
    font-size: 0.4rem;
  }
  /deep/ img {
    max-width: 100%;
  }
  /deep/ a {
    color: #999;
    font-size: 0.4rem;
  }
}
.cell-header {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  .name {
    font-size: 0.5rem;
    color: #999;
  }
}
.comment-itme {
  margin: 0.3rem;
  border-radius: 0.3rem;
  padding: 0.3rem;
  background-color: #efefef;
}
.txt {
  p {
    font-size: 0.4rem;
  }
}
.comments h5,
.comment-btn {
  margin: 0.3rem;
}
.input-commnet {
  margin: 0.3rem;
  border: 1px solid #9fbe9f;
}
.btn {
  margin: 0.2rem 0;
}
</style>
